<div class="view-body">
    <div class="view-inner">
        <div class="view-cont system-admin-cont">
            <header class="view-cont-hd clearfix">
                <!--页面标题-->
                <h2 class="pull-left"><span class="line"></span>区域管理</h2>
                <!--面包屑-->
                <ol class="breadcrumb">
                    <li>
                        <span>首页</span>
                    </li>
                    <li class="active">
                        <strong>区域管理</strong>
                    </li>
                </ol>
            </header>
            <section class="view-cont-bd">
                <div class="row-pane panel">
                    <div class="panel-body">
                        <div ui-tree data-drag-enabled="false">
                            <table ui-tree-nodes ng-model="vm.treeNode" class="table-tree">
                                <thead>
                                    <tr>
                                        <th width="50%">区域</th>
                                        <th width="30%">描述</th>
                                        <th width="20%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-if="!vm.treeNode">
                                        <td colspan="3" class="text-center">
                                            <i class="fa fa-spin fa-spinner"></i>数据加载中...
                                        </td>
                                    </tr>
                                    <tr ui-include-replace ng-repeat="node in vm.treeNode track by $index" ui-tree-node data-collapsed="true" ng-include="'nodes_table_renderer.html'">
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

<script type="text/ng-template" id="nodes_table_renderer.html">
    <tr>
        <td style="width:50%">
            <div ui-tree-handle class="tree-node tree-node-content">
                <a data-nodrag class="tree-node-handle" href="#" ng-click="vm.toggleNode(this, node, $event)">
                    <span class="fa" ng-class="{'fa-folder': collapsed, 'fa-folder-open': !collapsed, 'fa-file': !node.hasChildren }"></span>
                </a>
                <span class="tree-node-name" ng-class="{on: this.current}">{{node.regionName}}</span>
                <span ng-show="node.loading"><i class="fa fa-spin fa-spinner"></i></span>
            </div>
        </td>
        <td style="width:30%">{{node.regionDesc}}</td>
        <td style="width:20%">
            <div class="btn-action" ng-hide="node.confirm">
                <button type="button" class="btn btn-default btn-xs" ng-click="vm.openView(this, node, 'edit')"><i class="fa fa-pencil"></i>编辑</button>
                <button ng-if="node.regionType < 1400" type="button" class="btn btn-primary btn-xs" ng-click="vm.openView(this, node, 'add', $event)"><i class="fa fa-plus"></i>添加</button>
                <button ng-if="node.parRegionId != 0" type="button" class="btn btn-danger btn-xs" ng-click="vm.toggleConfirm(node)"><i class="fa fa-trash"></i>删除</button>
            </div>
            <div class="btn-action" ng-hide="!node.confirm">
                <button class="btn btn-default btn-xs" ng-click="vm.toggleConfirm(node)"><i class="fa fa-times"></i>取消</button>
                <button class="btn btn-primary btn-xs" ng-click="vm.removeNode(this, node)"><i class="fa fa-check"></i>确定</button>
            </div>
        </td>
    </tr>
    <tr class="tree-tr" ui-tree-nodes ng-model="node.nodes" ng-class="{hidden: collapsed}">
        <td colspan="3">
            <table>
                <tr ui-include-replace data-collapsed="true" ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_table_renderer.html'">
                </tr>
            </table>
        </td>
    </tr>
</script>